<template>
    <div class="scada-share">
        <div class="pass-wrap" v-if="shareDatas.isShare && shareDatas.sharePass">
            <div class="title-wrap">请输入密码进行访问</div>
            <div class="input-wrap">
                <el-input v-model="password" placeholder="请输入密码" type="password" show-password></el-input>
                <el-button type="primary" style="width: 100px; margin-left: 5px" @click="handleConfirmPass">确认</el-button>
            </div>
        </div>
        <div class="pass-wrap" v-if="!shareDatas.isShare">
            <div style="line-height: 300px; font-size: 26px">分享链接已失效</div>
        </div>
    </div>
</template>

<script>
import { getShare } from '@/api/scada/center';

export default {
    name: 'ScadaShare',
    components: {},
    data() {
        return {
            shareDatas: {
                isShare: 1,
                shareUrl: '',
                sharePass: '',
            },
            password: '', // 密码
        };
    },
    mounted() {
        this.getShareDetail();
    },
    methods: {
        getShareDetail() {
            // 查询分享接口
            const { guid, type, serialNumber } = this.$route.query;
            const params = {
                guid: guid,
                type: type,
                serialNumber: serialNumber,
            };
            getShare(params).then((res) => {
                const { code, data } = res;
                if (code === 200) {
                    this.shareDatas = data;
                    if (data.isShare && !data.sharePass) {
                        window.location.href = data.shareUrl;
                    }
                }
            });
        },
        // 确认密码
        handleConfirmPass() {
            if (this.password === this.shareDatas.sharePass) {
                window.location.href = this.shareDatas.shareUrl;
            } else {
                this.$message({
                    type: 'error',
                    message: '密码输入错误',
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.scada-share {
    width: 100%;
    height: 100%;

    .pass-wrap {
        width: 500px;
        height: 300px;
        position: relative;
        top: 50%;
        margin: 0 auto;
        transform: translateY(-50%);
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.08);
        text-align: center;

        .title-wrap {
            font-size: 26px;
            color: #333333;
            padding-top: 88px;
        }

        .input-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            margin-top: 50px;

            .el-input {
                width: 200px;
            }
        }
    }
}
</style>
